<template>
  <page-wrap stay-still back title="筛选" hide-tab>
    <view class="filter">
      <filter-list
        :title="item.title"
        :list="item.data"
        v-for="(item, index) in dataList"
        :label="filterObj[item.propLabel]"
        @change="handleChange($event, item.prop, item.propLabel)"
        :key="index"
      ></filter-list>
      <view class="filter-action">
        <u-button
          class="btn btn-reset"
          shape="circle"
          @click="handleReset"
          >重置</u-button
        >
        <u-button
          class="btn btn-confirm"
          :customStyle="btnConfirmStyle"
          shape="circle"
          @click="handleConfirm"
          >确认</u-button
        >
      </view>
    </view>
  </page-wrap>
</template>

<script>
import {
  searchZpExpList,
  publishList,
  eduList,
  typeList,
  salaryList,
} from "@/utils/data";

import FilterList from "./components/filterList.vue";
export default {
  components: {
    FilterList,
  },
  data() {
    return {
      filterObj: {
        salary: "",
        salaryLabel: "不限",
        edu: "",
        eduLabel: "不限",
        exp: "",
        expLabel: "不限",
        time: "",
        timeLabel: "所有日期",
        type: "",
        typeLabel: "不限",
      },
      dataList: [
        {
          title: "期望薪资",
          data: salaryList,
          prop: "salary",
          propLabel: "salaryLabel",
        },
        {
          title: "学历要求",
          data: eduList,
          prop: "edu",
          propLabel: "eduLabel",
        },
        {
          title: "工作年限",
          data: searchZpExpList,
          prop: "exp",
          propLabel: "expLabel",
        },

        {
          title: "更新时间",
          data: publishList,
          prop: "time",
          propLabel: "timeLabel",
        },
        {
          title: "工作类型",
          data: typeList,
          prop: "type",
          propLabel: "typeLabel",
        },
      ],
      btnResetStyle: {
        display: "inline-block",
        width: "232rpx",
        marginRight: "60rpx",
        color: "#d9001b",
        border: "none",
        backgroundColor: "#ec808d80",
      },
      btnConfirmStyle: {
        display: "inline-block",
        width: "426rpx",
        color: "#FFF",
        border: "none",
        background: this.$linearGradientBgColor,
      },
    };
  },
  onLoad(opt) {
    const item = JSON.parse(decodeURIComponent(opt.item));
    this.filterObj = Object.assign(this.filterObj, item);
  },
  methods: {
    handleChange(e, target, targetLabel) {
      this.$set(this.filterObj, target, e.value);
      this.$set(this.filterObj, targetLabel, e.label);
    },
    handleConfirm() {
      uni.$emit("filterUpdate", this.filterObj);
      uni.navigateBack({
        delta: 1,
      });
    },
    handleReset() {
      this.filterObj = {
        salary: "",
        salaryLabel: "不限",
        edu: "",
        eduLabel: "不限",
        exp: "",
        expLabel: "不限",
        time: "",
        timeLabel: "所有日期",
        type: "",
        typeLabel: "不限",
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.filter {
  background-color: #fff;
  padding: 32rpx 0 32rpx 32rpx;

  &-action {
    .btn {
      display: inline-block;
        height: 88rpx;
      &-reset {
        width: 200rpx;
        margin-right: 32rpx;
        color: $u-type-primary;
        border-color: $u-type-primary;
      }
    }
  }
}
</style>